@import '../../styles/loading.css';

.modal {
	z-index: 9;

	&-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}

	&-container {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 80%;
		max-height: 40%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 24px;
		overflow: hidden;
	}

	&-header {
		padding: 42px 20px 34px 20px;
	}

	&-title {
		text-align: center;
		font-size: 36px;
		font-weight: 600;
		padding: 10px 0 18px 0;
	}
	&-content {
		padding: 0 20px;
		text-align: center;
	}
	&-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #d3d3d3;
		color: rgb(50, 94, 238);
		&-left,
		&-right {
			flex: 1;
			text-align: center;
			border-right: 1px solid #d3d3d3;
			line-height: 88px;
			&:last-child {
				border: none;
			}
		}
	}

	.btns {
		&-loading {
			color: rgb(153, 153, 153);
		}
		&:active {
			background-color: rgba(241, 241, 241, 0.4);
		}
	}
}
